<template>
  <div class="page-container">
    <div class="sidebar-menu toggle-others fixed">
      <div class="sidebar-menu-inner">
        <header class="logo-env">
          <!-- logo -->
          <div class="logo">
            <a href="#" class="logo-expanded">
              <img src="../assets/images/logo@2x.png" width="100%" alt="" />
            </a>
            <a href="#" class="logo-collapsed">
              <img
                src="../assets/images/logo-collapsed@2x.png"
                width="40"
                alt=""
              />
            </a>
          </div>
          <div class="mobile-menu-toggle visible-xs">
            <a href="#" data-toggle="user-info-menu">
              <i class="linecons-cog"></i>
            </a>
            <a href="#" data-toggle="mobile-menu">
              <i class="fa-bars"></i>
            </a>
          </div>
        </header>
        <!-- 侧边栏 -->
        <ul id="main-menu" class="main-menu">
          <li v-for="(menu, idx) in menus" :key="idx">
            <a  class="smooth" @click="moveSlow(menu.cat_ID,menu.name,idx)" :style="idx == cat_index ? 'color:white;':''">
              <i :class="menu.category_description"></i>
              <span class="title">{{ menu.name }}</span>
            </a>
            <!-- <ul v-if="menu.children">
              <li v-for="(submenu, idx) in menu.children" :key="idx">
                <a
                  :href="'#' + transName(submenu)"
                  class="smooth"
                  @click="moveSlow"
                >
                  <span class="title">{{ transName(submenu) }}</span>
                  <span
                    v-show="submenu.is_hot"
                    class="label label-pink pull-right hidden-collapsed"
                    >Hot</span
                  >
                </a>
              </li>
            </ul> -->
          </li>
          <!-- 关于本站 -->
            <li @click="showAbout == true">
              <a href="#" class="smooth">
                <!-- <i class="fa fa-trophy"></i> -->
                <span class="title">关注公众号「宝藏男孩集」和我一起只工作，不上班。</span>
              </a>
            </li>
            <li @click="showAbout == true">
              <a href="#" class="smooth">
                <!-- <i class="fa fa-trophy"></i> -->
                <span class="title">微信：sz6881688</span>
              </a>
            </li>
        </ul>
      </div>
    </div>

    <div class="main-content">
      <nav class="navbar user-info-navbar" role="navigation">
        <ul class="user-info-menu left-links list-inline list-unstyled">
         
        </ul>
        
      </nav>

          
              <WebItem :item="items" :transName="transName" />
         
        
      <Footer />
    </div>
  </div>
</template>

<script>
import WebItem from "../components/WebItem.vue";
import Footer from "../components/Footer.vue";
import {CateList,ItemList} from "../config/api.js";
import {get} from '../utils/http.js';
// import {  swal } from 'sweetalert2'

export default {
  name: "Index",
  components: {
    WebItem,
    Footer,
  },
  data() {
    return {
      menus:[],
      items:[],
      lang: {},
      transName:'',
      cat_index:0,
      showAbout:false,
      langList: [
        {
          key: "zh",
          name: "简体中文",
          flag: "./assets/images/flags/flag-cn.png",
        },
        {
          key: "en",
          name: "English",
          flag: "./assets/images/flags/flag-us.png",
        },
      ],
    };
  },
  created() {
    this.lang = this.langList[0];
    this.getCateList();


  },
  methods: {
   
    getCateList() {
      const _this = this;
      get(CateList)
        .then(function (response) {
    
          console.log(response.data);
          _this.menus = response.data;
          const data = response.data;
          _this.moveSlow(data[0].cat_ID,data[0].name,0);
        })
        .catch(function (error) {
          console.log(error);
        });
        
    },
    moveSlow(cat_ID,name,index) {
      console.log(cat_ID)
      const _this = this;
      _this.cat_index = index;
      _this.transName = name;
      get(ItemList,{cat_id:cat_ID}).then(function(res){
        console.log(99)
        console.log(res)
        _this.items = res.data
        console.log("jdj",res.data)
      })
//   swal(
//   '干得漂亮！',
//   '你点击了按钮！',
//   'success'
// )
    },
  },
};
</script>

<style>
</style>
